<template>
  <div class="chemical">
    <div class="add" @click="addCheckList()">添加验收人</div>
    <eagle-list ref="eagleList" :tabData="tabData" @bindData="bindData">
      <eagle-cell v-for="(item, index) in list" :key="index" class="card">
        <div>
          <div>
            <div class="ch_header">
              <div>{{ item.ChnName }}</div>
                <template v-if="item.UserType == 20">
                  <eagle-divider />
                  <div class="dep_btm">
                    <div class="btm_item" @click="handleDelete(item)">
                      <div class="mr-10">移除</div>
                    </div>
                  </div>
                </template>
            </div>
          </div>

        </div>
      </eagle-cell>
    </eagle-list>

    
    <!--检查人选择-->
    <user-choose-dialog
      title="选择检查人"
      :show.sync="userChooseDialogShow"
      :tagData="tagData"
      @callback="userChooseCallback"
      :isMulti="true"
    >
    </user-choose-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { Dialog } from "vant";
import UserChooseDialog from "@/views/components/user/userChooseDialog.vue";
export default {
  components: {
    UserChooseDialog,
  },
  data() {
    return {
      loading: false,
      finished: false,
      value: "",
      list: [],
      userChooseDialogShow: false,
      tabData:[{
        url:"/DangerCheckTaskJG/GetApiVerifyUserPageData",
        dataType : "VerifyUser",
        isPage:false,
        params:{
          taskID:this.$route.query.taskId
        }
      }],
      tagData:[]
    };
  },
  computed: {
    ...mapGetters(["CompanyCode"]),
  },
  created() {
    //this.getList();
  },
  methods: {
    bindData(data){
      this.list = data.Data;
    },
    userChooseCallback(data) {
      let codeArr = [];
      let nameArr = [];
      if(data.length>0){
        for(var i=0;i<data.length;i++){
          codeArr.push(data[i].UserName);
          nameArr.push(data[i].ChnName);
        }
      }
      let params= {
        taskID:this.$route.query.taskId,
        userNames: codeArr.join(),
        chnNames: nameArr.join(),
      };

      let _this=this;
      _this.$axios
      .post("/DangerCheckTaskJG/GrantVerify",params)
      .then((res)=>{
        _this.$refs.eagleList.getList();
      })
      _this.userChooseDialogShow=false;
    },
    handleDelete(item) {
      let params= {
        taskID:item.TaskID,
        userName: item.UserName,
      };
      Dialog.confirm({
        title: "询问",
        message: "确定要删除该验收人吗?",
      })
        .then(() => {
          // on confirm
          let _this=this;
          _this.$axios
          .get("/DangerCheckTaskJG/RemoveVerifyUser",{params})
          .then((res)=>{
             _this.$toast.success("删除成功！");
             _this.$refs.eagleList.getList();
          })
        })
        .catch(() => {
          // on cancel
        });
    },
    // 详情
    addCheckList(ChemCode) {
      this.userChooseDialogShow = true;
      // this.$router.push({
      //   path: "/Danger/AddMyCheckList",
      //   query: { ctCode: this.$route.query.ctCode },
      // });
    }
  },
};
</script>

<style lang="less" scoped>
.chemical {
  background-color: #e8f1f8;

  .info_search {
    padding: 10px;
    border-radius: 5px !important;

    .van-field__control {
      background-color: #ffffff !important;
    }
  }
}

.chemical_item {
  position: relative;
  padding: 10px;
}

.ch_header {
  display: flex;
  justify-content: space-between;
  position: relative;
}

.ch_row {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  img {
    height: 15px;
    width: 15px;
    margin-right: 5px;
  }
  .ch_col {
    display: flex;
    align-items: center;
  }
}

.dep_btm {
  display: flex;
  justify-content: flex-end;
  border: 1px solid silver;
  border-radius: 5px;
  .btm_item {
    display: flex;
    align-items: center;
    img {
      height: 13px;
      width: 13px;
      margin: 5px;
    }
  }
}

.van-divider {
  margin-top: 0px;
  margin-bottom: 0px;
}

.mr-10 {
    margin-left:10px;
}
</style>
